<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/personalInfo.css" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<title></title>
		<style type="text/css">
			.top-header-left {
				top: 10px;
			}
			
			.backdrop {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 998;
				background-color: rgba(0, 0, 0, .3);
				display: none;
			}
			
			.mui-table-view {
				font-size: 14px;
			}
		</style>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
		</script>

	</head>

	<body>
		<div class="top-wrap">
			<div onclick="back()" class="top-header-left">
				<img src="../images/arrow-left-icon.png" />
			</div>
			<div class="title">
				个人中心
			</div>
			<!--<div onclick="goPersonalInfo()" class="right">
				<div class="dengji">
					3级
				</div>
				<div id="jindutiao" class="jindutiao">
					<p class="mui-progressbar mui-progressbar-success" data-progress="20"><span></span></p>
				</div>
				<img id="headimgurl" src="../images/shuijiao.jpg" />
			</div>-->
		</div>
		<div class="" style="padding-top: 45px;padding-bottom: 20px;">
			<!--<div class="personal-title">
				个人信息
			</div>-->
			<div class="personal-info">
				<div class="jifenshu">
					积分总数：300
				</div>
				<div class="touxiang">
					<img id="touxiang-pic" onclick="showMask()" src="../images/shuijiao.jpg" />
					<div id="name" class="name">
						gengzhenpei
					</div>
					<div class="num">
						3
					</div>
				</div>
				<div class="dengjishuoming">
					等级说明
				</div>
			</div>
			<div class="row-jifen">
				<span class="t float-left">积分：</span>
				<span class="all float-left">300</span>
				<div class="jindutiao float-left">
					<div id="demo1" class="mui-progressbar">
						<span></span>
					</div>
				</div>
				<span class="zj float-left">14</span>
			</div>
			<div class="personal-row-wrap">
				<div onclick="goPage('collectList.html')" class="row">
					<img class="icon float-left" src="../images/shouji-icon.png" />
					<span class="float-left">我的收集</span>
					<img class="arrow-right float-right" src="../images/arrow-right-icon.png" />
				</div>
				<div onclick="goPage('myMessage.html')" class="row">
					<img class="icon float-left" src="../images/xiaoxi-icon.png" />
					<span class="float-left">我的消息</span>
					<img class="arrow-right float-right" src="../images/arrow-right-icon.png" />
				</div>
				<div onclick="goPage('rewardList.html')" class="row">
					<img class="icon float-left" src="../images/jiangli-icon.png" />
					<span class="float-left">我的奖励</span>
					<img class="arrow-right float-right" src="../images/arrow-right-icon.png" />
				</div>
				<!--<div class="row">
					<img class="icon float-left" src="../images/shouji-icon.png" />
					<span class="float-left">我的信息</span>
					<img class="arrow-right float-right" src="../images/arrow-right-icon.png" />
				</div>-->
				<div class="row">
					<img class="icon float-left" src="../images/kefu-icon.png" />
					<span class="float-left">联系客服</span>
					<img class="arrow-right float-right" src="../images/arrow-right-icon.png" />
				</div>
				<div class="row">
					<img class="icon float-left" src="../images/wenti-icon.png" />
					<span class="float-left">常见问题</span>
					<img class="arrow-right float-right" src="../images/arrow-right-icon.png" />
				</div>
			</div>

		</div>
		<div id="mask" class="backdrop">
			<div class="tanchuang">
				<div onclick="captureImage()" class="paizhao">
					拍一张
				</div>
				<div onclick="galleryImg()" class="xiangce">
					相册选择
				</div>
				<div onclick="hideMask()" class="quxiao">
					取消
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var headimgurl = plus.storage.getItem('headimgurl');
			var nickname = plus.storage.getItem('nickname');
			console.log('nickname', nickname)
			document.getElementById('headimgurl').setAttribute('src', headimgurl);
			document.getElementById('touxiang-pic').setAttribute('src', headimgurl);
			document.getElementById('name').innerHTML = nickname;
			
			mui('#demo1').progressbar({
				progress: 50
			}).show();

			mui("#jindutiao .mui-progressbar").each(function() {
				mui(this).progressbar({
					progress: this.getAttribute("data-progress")
				}).show();
			});

			//进入到详情页面
			function goPage(url) {
				var w = plus.webview.open(url, null, null, "slide-in-right")
			}

			function showMask() {
				document.getElementById('mask').style.display = 'block';
			}

			function hideMask() {
				document.getElementById('mask').style.display = 'none';
			}

			// 拍照
			function captureImage() {
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: " + res + ", Format: " + fmt);
				cmr.captureImage(function(path) {
						alert("Capture image success: " + path);
					},
					function(error) {
						alert("Capture image failed: " + error.message);
					}, {
						//						resolution: res,
						//						format: fmt
					}
				);
			}

			// 从相册中选择图片 
			function galleryImg() {
				// 从相册中选择图片
				console.log("从相册中选择图片:");
				plus.gallery.pick(function(path) {
					console.log(path);
					document.getElementById('touxiang-pic').setAttribute('src', path);
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image"
				});
			}

			//跳页 
			function goPage(pageUrl) {
				plus.webview.open(pageUrl, null, null, "slide-in-right")
			}
		</script>
	</body>

</html>